<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #ecedf2;
            overflow: scroll;
        }

        .container {
            width: 1110px;
            margin: 20px auto;
        }

        .header {
            display: flex;
            width: 100%;
            height: 100px;
        }

        .header .title {
            width: 80px;
            height: 100px;
            background-color: rgb(84, 136, 213);
            border-radius: 10px 0 0 10px;
        }

        .header .title div {
            height: 50px;
            color: #fff;
            line-height: 50px;
            text-align: center;
        }

        .container .search .search-type {
            display: flex;
            /* gap: 20px;  */
            align-items: center;
            width: 1030px;
            height: 50px;
            line-height: 50px;
            color: #666;
            background-color: #fff;
        }

        .container .search input[type="radio"] {
            margin: 0 10px 0 30px;
            width: 20px;
            height: 20px;
        }

        .container .search .search-input {
            display: flex;
            margin-left: auto;
            align-items: center;
            margin-right: 30px;
            width: 300px;
            height: 35px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .container .search .search-input input {
            width: 260px;
            height: 20px;
            padding: 0 10px;
            border: none;
            outline: none;
            /* 取消输入时默认的边框 */
            border-right: 2px solid #ccc;
        }

        .container .search .search-btn {
            margin: 0 auto;
            width: 20px;
            height: 20px;
            background-image: url(./img/搜索.png);
            background-size: 100%;
        }

        .items {
            display: flex;
            flex-wrap: wrap;
            gap: 20px 30px;
            margin: 30px 20px;
            text-align: center;
        }

        .item {
            width: 80px;
            height: 100px;
            /* text-align: center; */
            line-height: 16px;
            text-decoration: none;
            color: inherit;
        }

        .item img {
            width: 80px;
            height: 80px;
            border-radius: 15px 0px;
            border: 2px solid rgb(84, 136, 213);
        }

        .no-data {
            width: 1070px;
            font-size: 20px;
            color: #aaa;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="title">
                <div>综合</div>
                <div>职业</div>
            </div>
            <div class="search">
                <div class="search-type">
                    <!-- 综合 -->
                    <input type="radio" name="type" id="type1" value="10"><label for="type1">本周免费</label>
                    <input type="radio" name="type" id="type2" value="11"><label for="type2">新手推荐</label>
                </div>
                <!-- 英雄职业 -->
                <div class="search-type">
                    <input type="radio" name="vocabulary" id="voc1" value="0"><label for="voc1">全部</label>
                    <input type="radio" name="vocabulary" id="voc2" value="1"><label for="voc2">战士</label>
                    <input type="radio" name="vocabulary" id="voc3" value="2"><label for="voc3">法师</label>
                    <input type="radio" name="vocabulary" id="voc4" value="3"><label for="voc4">坦克</label>
                    <input type="radio" name="vocabulary" id="voc5" value="4"><label for="voc5">刺客</label>
                    <input type="radio" name="vocabulary" id="voc6" value="5"><label for="voc6">射手</label>
                    <input type="radio" name="vocabulary" id="voc7" value="6"><label for="voc7">辅助</label>
                    <div class="search-input">
                        <input type="text" placeholder="请输入你想要搜索的英雄名">
                        <div class="search-btn"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="items"></div>
    </div>
    <script>
        // 获取容器元素
        const items = document.querySelector(".items");

        // 定义一个函数来获取数据
        function getData(url) {
            return new Promise(function (resolve, reject) {
                // 创建XMLHttpRequest对象
                const xhr = new XMLHttpRequest();

                // 设置请求
                xhr.open("GET", url);

                // 通过xhr的一个事件监听来获取请求的响应状态和数据
                xhr.onreadystatechange = function () {
                    // readyState这个状态会从0逐渐变化到4 如果变到了4说明请求响应成功了
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 说明请求数据成功了 可以将当前的Promise修改为成功状态 并且存储数据
                        resolve(JSON.parse(xhr.responseText));
                    }
                };
                // 发送请求
                xhr.send();
            });
        }

        // 读取数据并保存到变量中
        const Arr = [];
        async function sendData() {
            const datas = await getData("http://project.x-zd.net:3001/apis/herolist");
            const res = datas.data;
            res.forEach(item => {
                Arr.push(item);
            });
            render(res);
            console.log(res);
            Arr.push({ ename: "999", cname: "郑兴伟", hero_type: "6" });
        }
        // console.log(Arr)

        // 渲染函数
        function render(arr, keyword = '') {
            // 判断arr是不是空数组
            if (arr.length == 0) {
                items.innerHTML = "<p class='no-data'>暂无英雄数据</p>";
            } else {
                // 将数据渲染到页面中
                items.innerHTML = arr.map(item => {
                    let iname = item.cname;
                    if (keyword) {
                        iname = iname.replace(keyword, `<span style="color: red;">${keyword}</span>`);
                    }
                    var srcs = ''
                    if (item.ename == "999") {
                        srcs = "src='./img/郑兴伟.jpg'";
                    } else {
                        srcs = `src='https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg'`;
                    }
                    return `<a class="item" href="https://pvp.qq.com/web201605/herodetail/${item.ename}.shtml">                             
                                <img ${srcs} alt="">
                                <p>${iname}</p>
                            </a>`;

                    // return `<a class="item" href="https://pvp.qq.com/web201605/herodetail/${item.ename}.shtml">                             
                    //             <img src='https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg' alt="">
                    //             <p>${iname}</p>
                    //         </a>`;

                }).join("");


            }
        }

        sendData();

        const radio = document.querySelectorAll(".search-type input[type='radio']");
        radio[2].checked = true;  //默认选中“全部”
        radio.forEach(item => {
            item.addEventListener("click", () => {
                searchInput.value = ''  //每次点击时清空搜索框
                radio.forEach(items => {
                    items.checked = false;
                });
                item.checked = true;

                if (item.value == 0) {  //全部英雄
                    render(Arr);
                } else {
                    render(Arr.filter(e => {
                        return e.pay_type == item.value || e.hero_type == item.value || e.hero_type2 == item.value;
                    }));
                }
            });
        });

        // 搜索功能
        const searchInput = document.querySelector(".search-input input");

        // 监测输入框的变化
        searchInput.addEventListener("input", () => {
            radio[2].checked = true;  //搜索时默认选中“全部”
            const keyword = searchInput.value;
            render(Arr.filter(item => {
                return item.cname.includes(keyword);
            }), keyword);

            if (!keyword.trim()) {
                render(Arr);
            }
        });
    </script>
</body>

</html>